<template>
    <div class="box">
        <button class="goback" @click="closeFileBox" style="background-color:azure;padding:10px 20px 10px 20px; border-left:5px yellow solid;position: absolute;left:-2%;transition-duration: 0.4s;font-weight: bold;top:5%"><p style="transform: skew(20deg);">关闭</p></button>
        <p class="title"> ENTER FILE PATH</p>
        <input v-model="path" class="filepathinput"/>
        <button class="submit" @click="sendfiletrigger">发送</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            path:''
        }
    },
    methods:{
        sendfiletrigger(){
            if(this.path ==''){
                alert("NO EMPTY PATH")
                return
            }
            let path = this.path.split("/").join("//")
            this.$emit("sendFileHandler",path)
        },
        closeFileBox(){
            this.$emit("closeFileBox")
        }
    }
}
</script>
<style scoped>
.box{
    transition-duration: 0.5s;
    position:absolute;
    top:50%;
    left: 50%;
    flex-direction: column;
    transform:translate(-50%,-50%)  skew(-20deg);
    width: 400px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content:space-around;
    border-radius: 5px;
    background-color: rgba(70, 158, 161, 0.3);
    box-shadow: 5px 5px 5px 5px black;
}
input{
  font-size:20px;
  border:none;
  box-sizing:border-box;
  padding:5px;
  color:white;
  background:transparent;
  border-bottom: 1px solid rgb(14, 52, 59);
  transform:skewX(20deg);
}
.title{
    color: white;
    transform:skewX(20deg);

}
.filepathinput{
    width: 80%;
    transform:skewX(20deg);
}
.submit{
  font-size:20px;
  padding:5px;
  background:rgb(0, 182, 232);
  border-radius:5px;
  width:150px;
  margin-top:10px;
  transition:0.2s linear;
}
.submit:hover{
  background:white;
  color:black;
}

</style>